<template>
  <div class="my-orders-container">
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <h2>我的预定申请</h2>
        </div>
      </template>

      <el-table :data="orderList" v-loading="loading" style="width: 100%" empty-text="您还没有任何预定申请">
        <el-table-column prop="animalInfo.name" label="预定宠物">
          <template #default="{ row }">
            <div class="animal-cell">
              <el-image :src="row.animalInfo.imageUrl" class="animal-avatar" fit="cover" />
              <span>{{ row.animalInfo.name }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="finalPrice" label="价格" width="120">
          <template #default="{ row }">
            <span class="price">¥{{ row.finalPrice }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="申请时间" width="180">
          <template #default="{ row }">{{ new Date(row.createTime).toLocaleString('zh-CN') }}</template>
        </el-table-column>
        <el-table-column prop="status" label="申请状态" width="120" align="center">
          <template #default="{ row }">
            <el-tag :type="statusMap[row.status]?.type || 'info'">
              {{ statusMap[row.status]?.text || '未知' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="120" align="center">
          <template #default="{ row }">
            <el-button
                v-if="row.status === 1 || row.status === 2"
                :type="row.status === 1 ? 'primary' : 'default'"
                size="small"
                @click="viewOrderDetail(row.id)"
            >
              查看详情
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination-container" v-if="total > 0">
        <el-pagination background layout="prev, pager, next" :total="total" :page-size="queryParams.pageSize" :current-page="queryParams.current" @current-change="handlePageChange"/>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import { listMyOrderByPageApi } from '@/api/order.js';

const router = useRouter();
const loading = ref(true);
const orderList = ref([]);
const total = ref(0);

const queryParams = reactive({ current: 1, pageSize: 10 });
const statusMap = { 0: { text: '待审核', type: 'warning' }, 1: { text: '已通过', type: 'success' }, 2: { text: '未通过', type: 'info' } };

const fetchMyOrders = async () => {
  loading.value = true;
  try {
    const res = await listMyOrderByPageApi(queryParams);
    if (res) {
      orderList.value = res.records;
      total.value = Number(res.total);
    } else {
      ElMessage.error(res.message || '获取订单列表失败');
    }
  } catch (error) {
    ElMessage.error('网络请求失败');
  } finally {
    loading.value = false;
  }
};

const handlePageChange = (page) => {
  queryParams.current = page;
  fetchMyOrders();
};

// --- 核心修改点 ---
// 点击“查看详情”时，跳转到我们新命名的 orderReceipt 路由
const viewOrderDetail = (id) => router.push({ name: 'orderReceipt', params: { id } });

onMounted(fetchMyOrders);
</script>

<style scoped>
.my-orders-container {
  /* START: 核心修改 - 为主页内容提供一个居中的、有最大宽度的容器 */

  /* -- 可调整区域 -- */
  --page-max-width: 800px; /* 您可以在这里轻松调整最大宽度 */
  --page-padding-x: 20px;   /* 您可以在这里轻松调整左右间距 */
  /* -- 可调整区域结束 -- */

  width: 100%;
  max-width: var(--page-max-width);
  margin-left: auto;
  margin-right: auto;
  padding: 20px var(--page-padding-x);
  /* END: 核心修改 */
}
.card-header h2 { text-align: center; margin: 0; }
.animal-cell { display: flex; align-items: center; }
.animal-avatar { width: 40px; height: 40px; border-radius: 50%; margin-right: 10px; }
.price { font-weight: 500; color: #f56c6c; }
.pagination-container { display: flex; justify-content: center; margin-top: 20px; }
</style>
